<template>
  <div>
    <!-- 日历记录表 -->
    <el-calendar>
      <template #date-cell="{ data }">
        <!-- <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split("-").slice(1).join("-") }}
          {{ data.isSelected ? "✔️" : "" }}
        </p> -->
        <div
          class="dateContainer"
          :class="data.isSelected ? 'is-selected' : ''"
        >
          <div
            style="
              display: flex;
              flex-direction: row;
              justify-content: space-around;
            "
          >
            <div class="dateContainer-top">
              {{ data.day.split("-").slice(1).join("-") }}
            </div>
          </div>
          <div class="scheduleContent">
            <!-- {{ data.isSelected ? "✔️" : "" }} -->
            <div v-for="(items, index) in state.scheduleList">
              <div v-if="items.date == data.day">
                <!-- 编辑按钮 -->
                <div class="dateContainer-btn" @click="showCalendar(items)">
                  <el-icon :color="data.isSelected ? '#409EFC' : ''"
                    ><EditPen
                  /></el-icon>
                </div>
                <span
                  style="color: #409efc"
                  v-for="(item, index) in items.className"
                >
                  {{ item }}
                </span>
                <!-- 删除icon -->
                <div class="deleteIcon" @click="deleteCalendar(items)">
                  <el-icon :color="data.isSelected ? '#409EFC' : ''"
                    ><Delete
                  /></el-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </el-calendar>
    <!-- 修改日历记录表单 -->
    <CalendarForm v-model="state.showCalendarForm" />
  </div>
</template>
<script lang="ts" setup>
import { ref, inject, onMounted, reactive, onBeforeUnmount } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import CalendarForm from "./components/calendarForm.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { ElNotification } from "element-plus"; //处理导航信息

const { proxy } = useCurrentInstance();
const schedule = inject("schedule") as any; //工厂日历

const state: {
  scheduleList: anyObj[];
  showCalendarForm: boolean; //是否显示修改工厂日历配置项
} = reactive({ scheduleList: [], showCalendarForm: false });

//开关工厂日历修改记录表单
const showCalendar = (item: any) => {
  console.log("开关工厂日历修改记录表单", item);
  state.showCalendarForm = !state.showCalendarForm;
  proxy.eventBus.emit("everyWorkDay", item);
};

//查询工厂日历记录
proxy.eventBus.on("getScheduleOfFactory", (res: any) => {
  console.log("查询工厂日历记录", res);
  if (res.type == "equip") {
    //设备工厂日历
    schedule
      .getScheduleRecordList({
        // name: res.label,//名称(取当天日期)
        deptId: res.deptId,
        equipmentCode: res.equipmentCode,
      })
      .then((res: any) => {
        console.log("设备工厂日历", res);
        state.scheduleList = res;
      });
  } else {
    //部门工厂日历
    schedule
      .getScheduleRecordList({
        deptId: res.id,
        ancestors: res.ancestors,
      })
      .then((res: any) => {
        console.log("部门工厂日历", res);
        state.scheduleList = res;
      });
  }
});

// 删除工厂日历记录
const deleteCalendar = (item: any) => {
  console.log("删除工厂日历记录", item);
  ElMessageBox.confirm("是否删除该条记录", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      schedule.deleteScheduleRecord(item).then((res: any) => {
        //刷新工厂日历记录列表
        proxy.eventBus.emit("getScheduleOfFactory", schedule.backupSearch);
      });
      ElNotification({
        type: "success",
        message: "记录已删除",
      });
    })
    .catch(() => {});
};

onMounted(() => {});
</script>
<style lang="scss" scoped>
.dateContainer {
  position: relative;
  .dateContainer-btn {
    position: absolute;
    right: 0;
  }
  .scheduleContent {
    height: 50px;

    .deleteIcon {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
</style>
